/*
 * @Description: 客户店铺的商品
 * @Author: kanglin
 * @Date: 2018-07-09 09:17:28
 * @Copyright: Created by Panxsoft.
 */
<style lang="less" scoped rel="stylesheet/less" type="text/less" >

</style>


<template>
	<div class="customer-store-products">
		<queryForm
			:search="handleSearch"
			:stores="stores"
			:categories="categories"
			:group-categories="group_categories"
			:brands="brands"/>

		<storeProductIndex
			v-if="brands"
			:stores="stores"
			:sort="handleSearch"
			:brands="brands"
			:brands-list="brandsList"
			:sexes="sexes"
			:body_positions="body_positions"
			:categories="categories"
			:cosmetic-materials="cosmetic_materials"
			:loading="is_loading"
			:data="products.data" />

		<br>

		<!-- 分页组件 -->
		<Row
			type="flex"
			justify="center">
			<Page
				:total="products.total"
				:current="products.current_page"
				:page-size="products.per_page"
				:page-size-opts="[15,30,50,100]"
				placement="top"
				show-sizer
				show-total
				@on-change="handlePageChange"
				@on-page-size-change="handlePageSizeChange"/>
		</Row>
	</div>
</template>

<script>
import qs from 'qs';

import API_LIST from 'src/API_LIST';
import storeProductIndex from './index';
import queryForm from './query-form';

export default {
	name: 'CustomerStoreProductsViews',
	components: {
		storeProductIndex,
		queryForm,
	},
	data() {
		return {
			products: {
				total: 0,
				per_page: 15,
				current_page: 1,
				data: [],
			},
			is_loading: false,

			pageQueryForm: {
				page: null,
				per_page: null,
				store_id: null,
				is_sale: null,
				is_deleted: null,
				is_hot: null,
				is_new: null,
				keyword: null,
				brand_id: null,
				category_id: null,
				order_bys: null,
			},

			brands: {}, // 产品品牌
			categories: [], // 产品种类
			group_categories: [], // 分类成组
			stores: [], // 所属店铺
			body_positions: [], // 身体部位
			sexes: [], // 性别
			cosmetic_materials: [], // 材质

			brandsList: [], // 系列列表信息
		};
	},
	methods: {

		/**
		 * 切换tab请求店铺商品列表
		 * @return {undefined}
		 */
		fetchProducts() {
			this.fetchStoreProducts(this.pageQueryForm);
		},

		/**
         * 请求店铺商品列表
		 * @param {Object} param {列表传参对象}
		 * @return {undefined}
         */
		fetchStoreProductIndex(params = {}) {
			return this.$http.get(API_LIST.CUSTOMER_STORE_PRODUCTS, {
				params,
				paramsSerializer(parameter) {
					return qs.stringify(parameter, { encode: false, skipNulls: true });
				},
			})
				.then(({ data }) => {
					if (data.code !== 0) {
						throw new Error(data.error);
					} else {
						this.products.total = data.products.total;
						this.products.per_page = parseInt(data.products.per_page, 10);
						this.products.current_page = data.products.current_page;
						this.products.data = data.products.data;
					}
				});
		},

		/**
         *  请求商品数据
		 * 	@return {undefined}
         */
		fetchStoreProductCreate() {
			if (this.stores.length > 0) {
				return Promise.resolve();
			}
			return this.$http.get(API_LIST.CUSTOMER_STORE_PRODUCTS_CREATE)
				.then(({ data }) => {
					if (data.code !== 0) {
						throw new Error(data.error);
					} else {
						// this.product_tags = data.product_tags;
						this.brands = data.brands;
						this.categories = data.categories;
						this.stores = data.stores;
						this.group_categories = data.group_categories; // 分类成组
						this.cosmetic_materials = data.cosmetic_materials; // 材质
						this.body_positions = data.body_positions;
						this.sexes = data.sexes;
						this.brandsList = data.brand_with_series || [];
					}
				})
				.catch((error) => {
					this.$message.error(error.message);
				});
		},

		/**
         *  请求页面数据
		 *  @param {Object} params {搜索传参对象}
         */
		fetchStoreProducts(params) {
			this.is_loading = true;
			Promise.all([this.fetchStoreProductCreate(), this.fetchStoreProductIndex(params)])
				.catch((error) => {
					this.$message.error(error.message);
				})
				.then(() => {
					this.is_loading = false;
				});
		},

		/**
         *  执行查询
		 *  @param {Object} form 查询参数
		 *  @return {undefined}
         */
		handleSearch(form) {
			Object.assign(this.pageQueryForm, form);
			this.fetchStoreProducts(this.pageQueryForm);
		},

		/**
		 * 处理分页改变
		 * @param {Number} page 页码
		 * @return {undefined}
		 */
		handlePageChange(page) {
			Object.assign(this.pageQueryForm, {
				page,
			});
			this.fetchStoreProducts(this.pageQueryForm);
		},

		/**
		 * 分页大小
		 * @param {Number} size 页码
		 * @return {undefined}
		 */
		handlePageSizeChange(size) {
			Object.assign(this.pageQueryForm, {
				page: null,
				per_page: size,
			});
			this.fetchStoreProducts(this.pageQueryForm);
		},

	},
};
</script>
